<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: 张磊
 * @Date: 2020-11-09 16:53:10
 * @LastEditors: 张磊
 * @LastEditTime: 2020-11-13 23:10:07
 * @FilePath: \lht1802A\项目代码\rank_tree\src\views\Index\Home\index.vue
-->
<template>
  <div class="home">
    <header>
      <Input @click="goSearch" />
    </header>
    <main>
      <div class="nav">
        <ul>
          <li
            v-for="(item, index) in navList"
            :key="index"
            @click="changeTab(index, item.id)"
            :class="state.tabInd === index ? 'active' : ''"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="con">
        <div class="banner" v-if="!state.tabInd">
          <img :src="img" alt="" />
        </div>
        <div class="classList">
          <div class="item" v-for="(item, index) in classList" :key="index">
            <Item :item="item" />
          </div>
        </div>
        <div class="city" v-if="!state.tabInd">
          <div class="city_msg">
            <p>郑州市</p>
            <p>全部&gt;</p>
          </div>
          <div class="item" v-for="(item, index) in cityList" :key="index">
            <Item :item="item" />
          </div>
        </div>
        <div class="vodiu">
          <div class="vio_top">
            <ul class="vio_tab">
              <li
                v-for="(item, index) in state.vio_tab"
                :key="index"
                :class="state.orderBy - 1 === index ? 'active' : ''"
                @click="tabVud(index)"
              >
                {{ item }}
              </li>
            </ul>
            <ul class="vio_filter">
              <li
                v-for="(item, index) in state.vio_filter"
                :key="index"
                :class="state.filter - 1 === index ? 'active' : ''"
                @click="tabFilter(index)"
              >
                {{ item }}
              </li>
            </ul>
          </div>
          <div class="vio_con">
            <div
              class="vio_item"
              v-for="(item, index) in vudioList"
              :key="index"
            >
              <Vudio :item="item" />
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
// import { getTab, getBan, getClassList } from "../../api/index"
import Item from "@/components/Item";
import Input from "@/components/Input.vue";
import { useRouter } from "vue-router";
import Vudio from "@/components/Vudio";
import { defineComponent, computed, reactive } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  components: {
    Item,
    Vudio,
    Input,
  },
  setup(Proxy, context) {
    const state = reactive({
      navList: [], //tab切换数组
      mid: 0,
      phoneTerminal: 2,
      rcid: 0,
      tabInd: 0, //nav_tab 下标
      pageNo: 1,
      rankCategoryId: 0, //nav_tab_Id
      city: "郑州市",
      vio_tab: ["严选最新", "一周排名", "当月排名"], //视频tab列表
      vio_filter: ["视频", "官方"], //视频过滤列表
      orderBy: 1, //视频tab 下标
      filter: 0, //视频过滤 下标
    });

    let {
      mid,
      phoneTerminal,
      rcid,
      pageNo,
      rankCategoryId,
      city,
      orderBy,
      filter,
    } = state;
    console.log(Proxy);
    console.log(context);
    let store = useStore();
    store.dispatch("home/getTab", { mid, phoneTerminal });
    store.dispatch("home/getBan", { mid, rcid });
    store.dispatch("home/getClassList", { mid, rankCategoryId, pageNo });
    store.dispatch("home/getCityList", { mid, rankCategoryId, pageNo, city });
    store.dispatch("home/getVudioList", {
      mid,
      rankCategoryId,
      pageNo,
      orderBy,
      filter,
    });
    const changeTab = (index, id) => {
      console.log(id);
      // console.log(phoneTerminal,rcid,city);
      state.tabInd = index;
      state.rankCategoryId = id;
      console.log(state.rankCategoryId, "ieeeeee");
      store.dispatch("home/getClassList", { mid, rankCategoryId: id, pageNo });
      store.dispatch("home/getVudioList", {
        mid,
        rankCategoryId: id,
        pageNo,
        orderBy,
        filter: index + 1,
      });
    };
    const tabVud = (index) => {
      state.orderBy = index + 1;
      console.log(state.rankCategoryId, "iddddd");
      store.dispatch("home/getVudioList", {
        mid,
        rankCategoryId: state.rankCategoryId,
        pageNo,
        orderBy: index + 1,
        filter,
      });
    };
    const tabFilter = (index) => {
      state.filter = index + 1;
      store.dispatch("home/getVudioList", {
        mid,
        rankCategoryId: state.rankCategoryId,
        pageNo,
        orderBy,
        filter: index + 1,
      });
    };
    let Router = useRouter();
    function goSearch() {
      Router.push("/search");
    }
    return {
      navList: computed(() => store.state.home.navList), //tab切换数据
      img: computed(() => store.state.home.img), //图片数据
      classList: computed(() => store.state.home.classList), //标签栏数据
      cityList: computed(() => store.state.home.cityList), //城市数据
      vudioList: computed(() => store.state.home.vudioList), //视频数据
      state,
      changeTab,
      tabVud,
      tabFilter,
      goSearch
    };
  },
});
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 0.5rem;
}
header {
  width: 100%;
  padding: 0.4rem 0;
  p {
    background: #f0eeee;
    border-radius: 0.4rem;
    padding: 0.1rem;
  }
}
main {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  .nav {
    padding: 0.5rem 0;
    width: 100%;
    ul {
      display: flex;
      overflow: hidden;
      justify-content: space-between;
      overflow-x: auto;
      li {
        // text-align: center;
        min-width: 4rem;
        transition-delay: .3s;
        &.active {
          color: #000;
          font-weight: bold;
          border-bottom: 0.16rem solid #450164;
          padding-bottom: 0.08rem;
        }
      }
    }
  }
  .con {
    flex: 1;
    overflow: auto;
    .banner {
      width: 100%;
      img {
        width: 100%;
        height: 12rem;
        border-radius: 0.2rem;
      }
    }
    .classList {
      width: 100%;
      border: 0.04rem solid #ccc;
      border-radius: 0.2rem;
      display: flex;
      flex-wrap: wrap;
      margin-top: 0.2rem;
    }
    .item {
      width: 25%;
      padding: 0.2rem;
    }
    .city {
      width: 100%;
      border: 0.04rem solid #ccc;
      border-radius: 0.2rem;
      margin: 0.4rem 0;
      padding: 0.4rem;
      .city_msg {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.8rem;
      }
    }
    .vodiu {
      width: 100%;
      .vio_top {
        display: flex;
        justify-content: space-between;
        position: sticky;
        top: -0.12rem;
        z-index: 9;
        background: #fff;
        ul {
          display: flex;
          justify-content: space-between;
          li {
            padding: 0.32rem;
          }
        }
        .vio_filter {
          font-size: 0.56rem;
          li {
            &.active {
              font-weight: bold;
            }
          }
        }
        .vio_tab {
          li {
            &.active {
              border-bottom: 0.12rem solid #450164;

              font-weight: bold;
            }
          }
        }
      }
      .vio_con {
        margin-top: 0.4rem;
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .vio_item {
          width: 49%;
        }
      }
    }
  }
}
::-webkit-scrollbar {
  // 直接复制黏贴到样式页.css，完美解决
  display: none;
  /* background-color:transparent; */
}
</style>
